<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义指令</title>
    <script src="../vue.global.js"></script>
    <style>
        .header{
            position: absolute;
        }
    </style>
</head>
<body>
  <div id="root"></div>
<script>
    const app = Vue.createApp({
        template:`
          <div>
            <div v-pos:right="distance" class="header">
              <input type="input"/>
            </div>
          </div>
        `,
        methods:{},
        data(){
            return {distance:110}
        }
    });
    app.directive('pos',(el,binding)=>{
        el.style[binding.arg] = binding.value + 'px';
    })
    // app.directive('pos',{
    //     mounted(el,binding){
    //         el.style.top= binding.value + "px";
    //     },
    //     updated(el,binding){
    //         el.style.top= binding.value + "px";
    //     }
    // })
    const vm = app.mount("#root")
</script>
</body>
</html>